<template>
  <el-row :gutter="20" style="min-width: 1200px">
    <el-col :span="4" class="list" style="min-width: 600px">
      <el-card>
        <el-menu
          :default-active="activePath"
          text-color="#303133"
          active-text-color="#409EFF"
          @select="selectPath"
        >
          <el-menu-item index="personalCenter/personalData"
            >个人资料</el-menu-item
          >
          <el-menu-item index="personalCenter/myFans">我的粉丝</el-menu-item>
          <el-menu-item index="personalCenter/myFollowers"
            >我的关注</el-menu-item
          >
          <el-menu-item index="personalCenter/learningRecord"
            >学习记录</el-menu-item
          >
          <el-menu-item index="personalCenter/accountSettings"
            >账号设置</el-menu-item
          >
        </el-menu>
      </el-card>
    </el-col>
    <el-col :span="20" class="message">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { watch, ref, getCurrentInstance, ComponentInternalInstance } from 'vue';
import { useRouter } from 'vue-router';

const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const proxy = appContext.config.globalProperties;
const router = useRouter();

// 活跃的路由
const activePath = ref(proxy.$storage.getItem('activePath') || '');

// 监听当前路由
watch(() => router.currentRoute.value,
  (newValue: any) => {
    proxy.$storage.setItem(
      'activePath',
      proxy.$route.path.substring(1, newValue.path.length)
    );
    activePath.value = proxy.$storage.getItem('activePath');
  },
  { immediate: true }
);

// 跳转到对应的路由
  function  selectPath(index: any) {
      proxy.$router.push(`/${index}`);
};
</script>

<style lang="less" scoped>
.list {
  // background-color: coral;
  /deep/ .el-card__body {
    padding: 20px 0;
  }

  .el-card {
    position: fixed;
    width: 186px;
    .el-menu-item {
      text-align: center;
    }
  }
}

.message {
  margin-left: 206px;
}
</style>
